<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ECharts 多系列柱状图</title>
  <script src="echarts.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
  <div id="main" style="width: 100%; height: 180px"></div>
  <script type="text/javascript">
    // 初始化图表实例
    var myChart = echarts.init(document.getElementById("main"));

    // 初始配置项（数据留空，由iOS传入）
    var option = {
     // title: { text: "ECharts 多系列柱状图" },
      tooltip: {},
      legend: {  top:'1%' }, // 图例数据由iOS传入
      xAxis: {
        type: "category",
        scrollX: true
      },
      yAxis: {},
      dataZoom: [{ type: "inside", startValue: 0, endValue: 3, orient: "horizontal",
          // 禁止垂直方向缩放（只关注左右滑动）
          zoomLock: true,
          // 启用触摸滑动（移动端关键）
          moveOnTouch: true,
          // 禁用鼠标滚轮（移动端不需要）
          moveOnMouseWheel: false }],
      grid: {
          top:'20%',
          left: '4%',
          right: '1%',
          bottom: '2%',
          containLabel: true
      },
      dataset: {
        source: [] // 核心数据由iOS传入（格式：[["product", "系列1", "系列2"], ...]）
      },
      series: [
        {
          type: "bar",
          barWidth: 15,
          label: { show: true, position: "top" },
          itemStyle: {
            color: {
              type: "linear",
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: "#21B91D" },
                { offset: 1, color: "rgba(33,185,29, 0.2)" }
              ]
            }
          }
        },
        {
          type: "bar",
          barWidth: 15,
          label: { show: true, position: "top" },
          itemStyle: {
            color: {
              type: "linear",
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: "#F3A642" }, // 第二个系列用绿色
                { offset: 1, color: "rgba(243,166,66,0.2)" }
              ]
            }
          }
        },
        {
          type: "bar",
          barWidth: 15,
          label: { show: true, position: "top" },
          itemStyle: {
            color: {
              type: "linear",
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: "#FF3245" }, // 第三个系列用橙色
                { offset: 1, color: "rgba(255,50,69,0.2)" }
              ]
            }
          }
        }
      ]
    };

    // 初始化图表
    myChart.setOption(option);

    // 定义供iOS调用的更新方法
    function updateChart(sourceData, legendData) {
      // 验证数据格式
      if (!Array.isArray(sourceData) || !Array.isArray(legendData)) {
        console.error("数据格式错误，需传入数组");
        return;
      }
      // 更新数据集和图例
      option.dataset.source = sourceData;
     // option.legend.data = legendData;
      // 重新渲染图表
      myChart.setOption(option);
    }
      

  </script>
  <style>
    html, body { width: 100%; height: 100%; margin: 0; }
  </style>
</body>
</html>
